<template>
  <div class="points-container">
    <el-card class="points-card">
      <template #header>
        <div class="card-header">
          <h2>我的积分</h2>
        </div>
      </template>
      <div class="points-info">
        <div class="points-value">
          <div class="value">{{ points }}</div>
          <div class="label">当前积分</div>
        </div>
        <div class="level-info">
          <div class="level-name">
            <el-tag :type="getLevelType(level)">{{ getLevelName(level) }}</el-tag>
          </div>
          <div class="level-progress">
            <el-progress :percentage="levelProgress" :color="getLevelColor(level)"></el-progress>
            <div class="progress-text">距离下一等级还需 {{ nextLevelPoints }} 积分</div>
          </div>
        </div>
      </div>
    </el-card>

    <el-card class="rules-card">
      <template #header>
        <div class="card-header">
          <h2>积分规则</h2>
        </div>
      </template>
      <div class="rules-content">
        <h3>积分获取</h3>
        <ul>
          <li>消费1元获得1积分</li>
          <li>评价订单获得10积分</li>
          <li>分享餐厅获得20积分</li>
          <li>推荐新用户注册获得50积分</li>
        </ul>
        <h3>会员等级</h3>
        <el-table :data="levelRules" style="width: 100%">
          <el-table-column prop="level" label="等级">
            <template #default="scope">
              <el-tag :type="getLevelType(scope.row.level)">{{ scope.row.name }}</el-tag>
            </template>
          </el-table-column>
          <el-table-column prop="points" label="所需积分"></el-table-column>
          <el-table-column prop="discount" label="折扣优惠"></el-table-column>
          <el-table-column prop="benefits" label="其他权益"></el-table-column>
        </el-table>
      </div>
    </el-card>

    <el-card class="history-card">
      <template #header>
        <div class="card-header">
          <h2>积分记录</h2>
        </div>
      </template>
      <el-table :data="pointsHistory" style="width: 100%">
        <el-table-column prop="time" label="时间" width="180"></el-table-column>
        <el-table-column prop="type" label="类型" width="120">
          <template #default="scope">
            <el-tag :type="scope.row.change > 0 ? 'success' : 'danger'">
              {{ scope.row.change > 0 ? '获得' : '消费' }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="change" label="积分变动" width="120">
          <template #default="scope">
            <span :class="scope.row.change > 0 ? 'points-increase' : 'points-decrease'">
              {{ scope.row.change > 0 ? '+' : '' }}{{ scope.row.change }}
            </span>
          </template>
        </el-table-column>
        <el-table-column prop="description" label="描述"></el-table-column>
      </el-table>
      <div class="pagination">
        <el-pagination
          v-model:current-page="currentPage"
          v-model:page-size="pageSize"
          :page-sizes="[5, 10, 20, 50]"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>
    </el-card>
  </div>
</template>

<script setup lang="ts">
import { ref, computed } from 'vue'

// 用户积分信息
const points = ref(580)
const level = ref(2)

// 分页参数
const currentPage = ref(1)
const pageSize = ref(10)
const total = ref(100)

// 会员等级规则
const levelRules = [
  {
    level: 1,
    name: '普通会员',
    points: '0-999',
    discount: '无折扣',
    benefits: '生日礼品'
  },
  {
    level: 2,
    name: '银卡会员',
    points: '1000-2999',
    discount: '95折',
    benefits: '生日礼品 + 免费饮料'
  },
  {
    level: 3,
    name: '金卡会员',
    points: '3000-9999',
    discount: '9折',
    benefits: '生日礼品 + 免费饮料 + 专属优惠券'
  },
  {
    level: 4,
    name: '钻石会员',
    points: '10000+',
    discount: '85折',
    benefits: '生日礼品 + 免费饮料 + 专属优惠券 + VIP专座'
  }
]

// 积分记录
const pointsHistory = [
  {
    time: '2023-05-01 12:30:45',
    change: 128,
    description: '订单DD20230501001消费获得积分'
  },
  {
    time: '2023-05-01 12:35:20',
    change: 10,
    description: '评价订单DD20230501001获得积分'
  },
  {
    time: '2023-04-28 18:20:15',
    change: 256,
    description: '订单DD20230428002消费获得积分'
  },
  {
    time: '2023-04-28 18:25:30',
    change: 10,
    description: '评价订单DD20230428002获得积分'
  },
  {
    time: '2023-04-25 20:10:30',
    change: 98,
    description: '订单DD20230425003消费获得积分'
  },
  {
    time: '2023-04-20 19:05:20',
    change: -200,
    description: '兑换优惠券消费积分'
  },
  {
    time: '2023-04-15 12:30:10',
    change: 320,
    description: '订单DD20230415005消费获得积分'
  }
]

// 计算下一等级所需积分
const nextLevelPoints = computed(() => {
  if (level.value === 1) {
    return 1000 - points.value
  } else if (level.value === 2) {
    return 3000 - points.value
  } else if (level.value === 3) {
    return 10000 - points.value
  } else {
    return 0
  }
})

// 计算等级进度
const levelProgress = computed(() => {
  if (level.value === 1) {
    return (points.value / 1000) * 100
  } else if (level.value === 2) {
    return ((points.value - 1000) / 2000) * 100
  } else if (level.value === 3) {
    return ((points.value - 3000) / 7000) * 100
  } else {
    return 100
  }
})

// 获取等级名称
const getLevelName = (level: number) => {
  switch (level) {
    case 1: return '普通会员'
    case 2: return '银卡会员'
    case 3: return '金卡会员'
    case 4: return '钻石会员'
    default: return '未知等级'
  }
}

// 获取等级类型
const getLevelType = (level: number) => {
  switch (level) {
    case 1: return 'info'
    case 2: return 'success'
    case 3: return 'warning'
    case 4: return 'danger'
    default: return 'info'
  }
}

// 获取等级颜色
const getLevelColor = (level: number) => {
  switch (level) {
    case 1: return '#909399'
    case 2: return '#67c23a'
    case 3: return '#e6a23c'
    case 4: return '#f56c6c'
    default: return '#909399'
  }
}

// 分页大小变化
const handleSizeChange = (val: number) => {
  pageSize.value = val
  // 重新加载数据
}

// 当前页变化
const handleCurrentChange = (val: number) => {
  currentPage.value = val
  // 重新加载数据
}
</script>

<style scoped>
.points-container {
  padding: 20px;
}

.points-card, .rules-card, .history-card {
  margin-bottom: 20px;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.points-info {
  display: flex;
  align-items: center;
  padding: 20px 0;
}

.points-value {
  text-align: center;
  margin-right: 40px;
}

.value {
  font-size: 36px;
  font-weight: bold;
  color: #f56c6c;
}

.label {
  color: #909399;
  margin-top: 5px;
}

.level-info {
  flex: 1;
}

.level-name {
  margin-bottom: 10px;
}

.progress-text {
  margin-top: 5px;
  color: #909399;
  font-size: 12px;
}

.rules-content h3 {
  margin-top: 20px;
  margin-bottom: 10px;
}

.rules-content ul {
  padding-left: 20px;
  margin-bottom: 20px;
}

.points-increase {
  color: #67c23a;
}

.points-decrease {
  color: #f56c6c;
}

.pagination {
  margin-top: 20px;
  display: flex;
  justify-content: flex-end;
}
</style>
